<template>
  <div>

    <button class="animate__animated animate__bounce btn btn-primary" type="button" data-bs-toggle="button" aria-pressed="false" autocomplete="off">linux</button>
    <button @click="toggle = toggle? false : true" type="button" class="btn btn-danger" data-bs-toggle="button" aria-pressed="false" autocomplete="off">python</button>

    <div>
      <span class="animate__animated animate__bounce" v-show='toggle'>linux</span><span v-show="! toggle">python</span> is fun to learn!
    </div>

  </div>
</template>

<script>
  import http from '@/utils/Http';
  // import animated from 'animate.css'
  import animate from 'animate.css';
  export default {
    components: {},
    methods: {},
    data() {
      return {
        toggle: true,
        list: ['python', 'linux', 'docker', 'c'],
        show: true,
        deviceList: []
      }
    },
    mounted() {
      // this.set_eventListener()
      window.addEventListener('focus', this.msg)
    },
    unmounted() {
      window.removeEventListener('focus', this.msg);
    },
  }
</script>

<style scoped>
</style>
